<template>
  <drop-wrap :data="data" :index="index" :element="element">
    <div class="shuttle-warp">
      <shuttle :leftList.sync="leftList" :rightList.sync="rightList"></shuttle>
    </div>
  </drop-wrap>
</template>

<script>
  import shuttle from "./shuttle.vue"
  export default {
    inject: ["getStore"],
    data () {
      return {
        leftList: [
          {
            id: '1',
            name: '人防工程监理(1)',
            // check: true
          },
          {
            id: '2',
            name: '人防工程监理(2)',
          },
          {
            id: '3',
            name: '人防工程监理(3)',
          },
          {
            id: '4',
            name: '人防工程监理(4)',
          }
        ],
        rightList: [],
      }
    },
    components: {
      shuttle
    },
    props: ["element", "data", "index"],
    computed: {
      store () {
        return this.getStore();
      },
    },
  };
</script>

<style lang="scss" scoped>
.el-table {
  border-bottom: none;
  font-size: 12px;
  th {
    border-bottom: 1px solid #efefef;
    padding: 8px 0;
    text-align: center;
  }
  .el-table__header {
    .has-gutter {
      .is-left {
        text-align: left !important;
      }

      .is-right {
        text-align: right !important;
      }

      .cell {
        font-family: "PingFang SC ", "PingFang SC";
        font-weight: 400;
        font-style: normal;
        font-size: 12px;
        color: #999999;
        line-height: 23px !important;
      }
    }
  }
}
.card-main {
  .pageComponent {
    margin-top: 10px;
  }
  .table-merge-bottom {
    font-size: 16px;
    height: 26px;
    line-height: 26px;
    padding-left: 80%;
    border: 1px solid #e6e6e6;
    border-top: none;
  }
}
.el-table th.el-table__cell {
  background-color: #f6f6f6;
}
</style>